<script setup lang="ts">
import { ref } from 'vue'
import { getRecentRepairs, getStatistics } from '../../api/statistics'
import { useRouter } from 'vue-router'
const statistics = ref<any>([])
const recentRepairs = ref<any>([])

// 统计数据
const fetchStatistics = async () => {
  const res = await getStatistics()
  statistics.value = res.data
}
const fetchRecentRepairs = async () => {
  const res = await getRecentRepairs()
  recentRepairs.value = res.data
}
fetchStatistics()
fetchRecentRepairs()
const router = useRouter()

// 获取状态对应的类型
const getStatusType = (status: string) => {
  switch (status) {
    case '待处理':
      return 'warning'
    case '处理中':
      return 'primary'
    case '已完成':
      return 'success'
    default:
      return 'info'
  }
}
</script>

<template>
  <div class="dashboard-container">
    <div class="welcome-section">
      <h1>欢迎来到城市公共设施报修系统</h1>
      <p>这里是管理员控制台，您可以在这里管理所有的报修信息和设施信息</p>
    </div>
    
    <!-- 统计卡片 -->
    <el-row :gutter="20" class="statistics-row">
      <el-col :xs="24" :sm="12" :md="6" v-for="(item, index) in statistics" :key="index">
        <el-card shadow="hover" class="statistics-card">
          <div class="statistics-icon" :style="{ backgroundColor: item.color }">
            <el-icon><component :is="item.icon" /></el-icon>
          </div>
          <div class="statistics-info">
            <div class="statistics-title">{{ item.title }}</div>
            <div class="statistics-count">{{ item.count }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 最近报修 -->
    <el-card class="recent-repairs" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>最近报修</span>
          <el-button type="primary" size="small" text @click="router.push('repair')">查看更多</el-button>
        </div>
      </template>
      <el-table :data="recentRepairs" style="width: 100%" stripe>
        <el-table-column prop="id" label="报修编号" width="140" />
        <el-table-column prop="title" label="报修标题" min-width="180" />
        <el-table-column prop="type" label="设施类型" width="120" />
        <el-table-column prop="address" label="地址" min-width="180" />
        <el-table-column prop="time" label="报修时间" width="160" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)" size="small">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template #default>
            <!-- 跳转到报修详情页面 -->
            <el-button type="primary" size="small" text @click="router.push('repair')">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    
    <!-- 系统信息 -->
    <el-card class="system-info" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>系统信息</span>
        </div>
      </template>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="系统名称">城市公共设施报修系统</el-descriptions-item>
        <el-descriptions-item label="当前版本">v1.0.0</el-descriptions-item>
        <el-descriptions-item label="部署环境">生产环境</el-descriptions-item>
        <el-descriptions-item label="服务器状态">正常</el-descriptions-item>
        <el-descriptions-item label="数据库状态">正常</el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<style scoped>
.dashboard-container {
  padding: 20px 0;
}

.welcome-section {
  margin-bottom: 30px;
}

.welcome-section h1 {
  font-size: 24px;
  color: #303133;
  margin-bottom: 10px;
}

.welcome-section p {
  font-size: 14px;
  color: #606266;
}

.statistics-row {
  margin-bottom: 30px;
}

.statistics-card {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.statistics-icon {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 15px;
}

.statistics-icon .el-icon {
  font-size: 30px;
  color: white;
}

.statistics-info {
  flex: 1;
}

.statistics-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 5px;
}

.statistics-count {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.recent-repairs {
  margin-bottom: 30px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header span {
  font-size: 16px;
  font-weight: bold;
}

.system-info {
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .statistics-card {
    margin-bottom: 15px;
  }
}
</style> 